Monitorización del rendimiento de JavaScript: Guía completa de Medición de Usuarios Reales (RUM)

En el panorama digital actual, el rendimiento de un sitio web es primordial. Un sitio web lento puede llevar a usuarios frustrados, carritos de compra abandonados y, en última instancia, un impacto negativo en su negocio. Mientras que la monitorización sintética (pruebas de usuario simuladas) proporciona información valiosa, no captura la imagen completa. La Medición de Usuarios Reales (RUM) ofrece un enfoque centrado en el usuario para la monitorización del rendimiento al rastrear las experiencias reales de los usuarios mientras interactúan con su sitio web. Esta guía proporciona una visión general completa del RUM, incluyendo su implementación, métricas clave, técnicas de análisis y mejores prácticas para optimizar el rendimiento del sitio web a nivel mundial.

¿Qué es la Medición de Usuarios Reales (RUM)?

RUM, también conocido como Monitorización de Usuarios Reales o monitorización de la experiencia del usuario final, es una técnica de monitorización pasiva que recopila datos de rendimiento de los usuarios reales de un sitio web en tiempo real. Captura métricas críticas relacionadas con los tiempos de carga de la página, la carga de recursos, la ejecución de JavaScript y las interacciones del usuario. A diferencia de la monitorización sintética, el RUM proporciona una comprensión genuina de cómo los usuarios experimentan su sitio web bajo diversas condiciones, incluyendo diferentes navegadores, dispositivos, velocidades de red y ubicaciones geográficas. Esto le permite identificar cuellos de botella en el rendimiento y priorizar los esfuerzos de optimización basados en el impacto en el mundo real.

¿Por qué es importante el RUM?

El RUM ofrece varias ventajas sobre las técnicas de monitorización tradicionales:

• Proporciona una visión centrada en el usuario: El RUM se enfoca en la experiencia real del usuario, proporcionando información sobre cómo el rendimiento impacta la satisfacción del usuario y los resultados del negocio.
• Identifica problemas del mundo real: Captura problemas de rendimiento que podrían no ser detectados en un entorno de prueba controlado, como variaciones en la latencia de la red en diferentes regiones (por ejemplo, un sitio web que carga rápidamente en América del Norte pero lentamente en el sudeste asiático).
• Señala cuellos de botella en el rendimiento: El RUM ayuda a identificar componentes o recursos específicos que contribuyen a un bajo rendimiento, como imágenes de carga lenta, código JavaScript ineficiente o problemas en la API del backend.
• Prioriza los esfuerzos de optimización: Al comprender el impacto del rendimiento en los usuarios reales, puede priorizar los esfuerzos de optimización en función de su potencial retorno de la inversión (ROI). Por ejemplo, optimizar imágenes para usuarios móviles en regiones con ancho de banda limitado podría ser una prioridad más alta que optimizar para usuarios de escritorio en regiones con internet de alta velocidad.
• Mide el impacto de los cambios: El RUM le permite rastrear el impacto de las optimizaciones de rendimiento a lo largo del tiempo, asegurando que sus esfuerzos realmente están mejorando la experiencia del usuario.
• Facilita las pruebas A/B: Puede usar RUM para medir el impacto en el rendimiento de diferentes variaciones del sitio web (pruebas A/B) y elegir la versión que ofrece la mejor experiencia de usuario y resultados de negocio.

Métricas clave de RUM

El RUM captura una amplia gama de métricas que proporcionan información valiosa sobre el rendimiento del sitio web. Estas son algunas de las métricas más importantes a seguir:

Tiempo de carga de la página

El tiempo de carga de la página es el tiempo que tarda una página web en cargarse completamente y volverse interactiva. Es una métrica crítica que impacta directamente en la satisfacción y el compromiso del usuario. Diferentes etapas del tiempo de carga de la página son importantes:

• First Contentful Paint (FCP): Mide el tiempo en que se pinta el primer texto o imagen en la pantalla. Esta métrica indica cuán rápido los usuarios perciben que la página se está cargando.
• Largest Contentful Paint (LCP): Mide el tiempo en que el elemento de contenido más grande (por ejemplo, una imagen o video) se pinta en la pantalla. LCP refleja la experiencia de carga general para el contenido más prominente de la página.
• First Input Delay (FID): Mide el tiempo entre la primera interacción de un usuario con una página (por ejemplo, hacer clic en un enlace o botón) y el momento en que el navegador puede responder a esa interacción. FID refleja la capacidad de respuesta de la página.
• Time to Interactive (TTI): Mide el tiempo en que la página se ha cargado lo suficiente como para manejar la entrada del usuario de manera fiable. Un TTI más bajo indica una mejor experiencia de usuario.
• Tiempo de carga del DOM: El tiempo que le toma al navegador analizar el documento HTML y construir el Document Object Model (DOM).
• Tiempo de carga completa: El tiempo que tardan en cargarse todos los recursos de la página, incluyendo imágenes, scripts y hojas de estilo.

Tiempo de los recursos (Resource Timing)

El "Resource Timing" proporciona información detallada sobre el tiempo de carga de los recursos individuales en una página web, como imágenes, scripts y hojas de estilo. Esto le permite identificar recursos específicos que están contribuyendo a tiempos de carga de página lentos.

• Tiempo de búsqueda de DNS: El tiempo que se tarda en resolver el nombre de dominio de un recurso a su dirección IP.
• Tiempo de conexión TCP: El tiempo que se tarda en establecer una conexión TCP con el servidor que aloja el recurso.
• Tiempo de solicitud: El tiempo que se tarda en enviar la solicitud al servidor y recibir el primer byte de la respuesta (TTFB - Time To First Byte).
• Tiempo de respuesta: El tiempo que se tarda en descargar el recurso completo desde el servidor.

Tiempo de ejecución de JavaScript

El tiempo de ejecución de JavaScript mide el tiempo que le toma al navegador ejecutar el código JavaScript en una página web. Un código JavaScript ineficiente puede impactar significativamente el rendimiento y la capacidad de respuesta de la página.

• Tiempo de evaluación del script: El tiempo que le toma al navegador analizar y compilar el código JavaScript.
• Tiempo de ejecución del script: El tiempo que le toma al navegador ejecutar el código JavaScript compilado.

Seguimiento de errores

El RUM también se puede utilizar para rastrear errores de JavaScript y otros errores del lado del cliente que pueden afectar la experiencia del usuario. Identificar y corregir estos errores es crucial para garantizar una experiencia de usuario fluida y fiable.

Métricas personalizadas

Además de las métricas RUM estándar, también puede definir métricas personalizadas para rastrear indicadores de rendimiento específicos que son relevantes para su aplicación. Por ejemplo, podría rastrear el tiempo que se tarda en completar una acción específica del usuario, como agregar un artículo a un carrito de compras o enviar un formulario. Para una plataforma de comercio electrónico global, las métricas personalizadas podrían incluir las tasas de finalización de compra en diferentes países, los tiempos de procesamiento de pagos con diversas pasarelas de pago o los tiempos promedio de carga de resultados de búsqueda según la configuración de idioma.

Implementando RUM

Existen varias formas de implementar RUM:

1. Usando una herramienta RUM de terceros

La forma más fácil de implementar RUM es usar una herramienta de terceros. Varios proveedores ofrecen soluciones RUM integrales que proporcionan una amplia gama de características, incluyendo recopilación de datos, análisis e informes. Las herramientas RUM populares incluyen:

• New Relic Browser: Una potente herramienta RUM que proporciona información detallada sobre el rendimiento del sitio web y la experiencia del usuario.
• Datadog RUM: Ofrece capacidades RUM integrales integradas con otras herramientas de monitorización y observabilidad.
• Dynatrace: Una plataforma de monitorización todo en uno que incluye capacidades RUM para la monitorización del rendimiento de extremo a extremo.
• Raygun: Una plataforma de monitorización de usuarios que se enfoca en el seguimiento de errores y la monitorización del rendimiento.
• Sentry: Una plataforma de código abierto para el seguimiento de errores y la monitorización del rendimiento.
• Google PageSpeed Insights: Aunque es principalmente una herramienta de prueba, PageSpeed Insights también proporciona datos RUM basados en el Informe de Experiencia de Usuario de Chrome (CrUX).

Al elegir una herramienta RUM, considere factores como:

• Características: ¿La herramienta ofrece las características que necesita, como métricas de rendimiento detalladas, seguimiento de errores y métricas personalizadas?
• Precio: ¿La herramienta es asequible para su presupuesto?
• Facilidad de uso: ¿La herramienta es fácil de configurar y usar?
• Integración: ¿La herramienta se integra con sus herramientas de monitorización y desarrollo existentes?
• Escalabilidad: ¿Puede la herramienta manejar el volumen de tráfico de su sitio web?
• Privacidad y seguridad de los datos: ¿La herramienta cumple con las regulaciones de privacidad de datos pertinentes (por ejemplo, GDPR, CCPA)?

La mayoría de las herramientas RUM requieren que agregue un fragmento de JavaScript a su sitio web. Este fragmento recopila datos de rendimiento de los navegadores de los usuarios y los envía a la herramienta RUM para su análisis. El fragmento es típicamente agregado a la sección <head> de sus páginas HTML para asegurar que se cargue temprano y capture datos de rendimiento precisos. Los detalles específicos de la implementación variarán dependiendo de la herramienta RUM que elija. Por ejemplo, una empresa europea debe asegurarse de que la herramienta RUM respete el GDPR y proporcione residencia de datos dentro de la UE.

2. Construyendo su propia solución RUM

Si tiene requisitos específicos que no son satisfechos por las herramientas RUM existentes, puede construir su propia solución RUM. Este enfoque ofrece mayor flexibilidad y control sobre el proceso de recopilación y análisis de datos, pero también requiere más experiencia técnica y recursos. Construir su propia solución podría ser adecuado para empresas con necesidades muy específicas, como industrias altamente reguladas (por ejemplo, finanzas, salud) o aquellas con requisitos únicos de privacidad de datos. Una institución financiera en Japón, por ejemplo, podría necesitar construir su propia solución RUM para cumplir con las regulaciones locales sobre la localización y seguridad de los datos.

Aquí hay un esquema básico de cómo construir su propia solución RUM:

1. Recopilar datos de rendimiento: Use la API de rendimiento del navegador para recopilar métricas de rendimiento, como tiempos de carga de página, tiempo de recursos y tiempo de ejecución de JavaScript.
2. Enviar datos a un servidor: Use JavaScript para enviar los datos recopilados a un servidor para su almacenamiento y análisis.
3. Almacenar los datos: Almacene los datos en una base de datos o en un almacén de datos.
4. Analizar los datos: Use herramientas de análisis de datos para analizar los datos e identificar cuellos de botella en el rendimiento.
5. Visualizar los datos: Cree paneles e informes para visualizar los datos y compartir ideas con su equipo.

Ejemplo de fragmento de código JavaScript para recopilar el tiempo de carga de la página usando la API de rendimiento:

            
window.addEventListener('load', function() {
  const performanceTiming = window.performance.timing;
  const pageLoadTime = performanceTiming.loadEventEnd - performanceTiming.navigationStart;
  console.log('Page load time:', pageLoadTime + 'ms');

  // Enviar el pageLoadTime a su servidor
  // sendDataToServer('/api/rum', { pageLoadTime: pageLoadTime });
});

            

              
                Copy
              
            
          

Consideraciones importantes para construir su propio RUM:

• Precisión: Asegúrese de que sus métodos de recopilación de datos sean precisos y fiables.
• Rendimiento: Minimice el impacto de su solución RUM en el rendimiento del sitio web. Evite recopilar datos excesivos o utilizar métodos de recopilación de datos ineficientes.
• Seguridad: Proteja los datos del usuario y evite el acceso no autorizado a sus datos RUM.
• Escalabilidad: Diseñe su solución RUM para manejar el volumen de tráfico de su sitio web.
• Mantenimiento: Planifique el mantenimiento y las actualizaciones continuas de su solución RUM.

Análisis de datos RUM

Una vez que haya implementado RUM, el siguiente paso es analizar los datos recopilados para identificar cuellos de botella en el rendimiento y priorizar los esfuerzos de optimización. Aquí hay algunas técnicas de análisis comunes:

1. Identificar páginas lentas

Comience por identificar las páginas más lentas de su sitio web. Concéntrese en optimizar estas páginas primero, ya que es probable que tengan el mayor impacto en la experiencia del usuario. Observe métricas como el tiempo de carga de la página (FCP, LCP, TTI, Tiempo de carga completa) e identifique las páginas que consistentemente tienen un rendimiento bajo. Puede segmentar estos datos por tipo de dispositivo (móvil vs. escritorio) y región geográfica para identificar áreas específicas de mejora.

2. Analizar el tiempo de los recursos (Resource Timing)

Analice los datos de "Resource Timing" para identificar recursos específicos que están contribuyendo a tiempos de carga de página lentos. Busque recursos que tarden mucho en descargarse o que tengan una alta latencia. Los culpables comunes incluyen imágenes grandes, archivos JavaScript no optimizados y scripts de terceros de carga lenta. Si ve tiempos de carga de imágenes lentos en toda Sudamérica, por ejemplo, considere usar una CDN con servidores locales en esa región.

3. Investigar el tiempo de ejecución de JavaScript

Investigue el tiempo de ejecución de JavaScript para identificar código JavaScript ineficiente que está afectando el rendimiento de la página. Busque scripts de larga duración, bucles ineficientes y manipulaciones innecesarias del DOM. Use las herramientas de desarrollo del navegador para perfilar su código JavaScript e identificar cuellos de botella en el rendimiento. La división de código (code splitting) y la carga diferida (lazy loading) también pueden ayudar a mejorar el rendimiento de JavaScript.

4. Rastrear las tasas de error

Rastree las tasas de error para identificar errores de JavaScript y otros errores del lado del cliente que están afectando la experiencia del usuario. Corrija estos errores rápidamente para garantizar una experiencia de usuario fluida y fiable. Monitorear las tasas de error por tipo de navegador puede revelar problemas de compatibilidad específicos del navegador. Un aumento en los errores en un dispositivo móvil en particular podría indicar la necesidad de una optimización específica para ese dispositivo.

5. Segmentar datos

Segmente sus datos RUM por varias dimensiones, tales como:

• Tipo de dispositivo: Móvil, escritorio, tableta
• Navegador: Chrome, Firefox, Safari, Edge
• Sistema operativo: Windows, macOS, iOS, Android
• Ubicación geográfica: País, región, ciudad
• Velocidad de la red: 3G, 4G, 5G, Wi-Fi
• Tipo de usuario: Usuario nuevo, usuario recurrente, usuario conectado

Segmentar sus datos le permite identificar problemas de rendimiento que son específicos para ciertos grupos de usuarios. Por ejemplo, podría descubrir que su sitio web funciona mal en dispositivos móviles en ciertas regiones geográficas debido a velocidades de red lentas. Segmentar por tipo de usuario puede revelar diferencias en el rendimiento entre usuarios nuevos y recurrentes. Un sitio web que depende en gran medida del almacenamiento en caché del lado del cliente debería ver un mejor rendimiento para los usuarios recurrentes. Un sitio web de noticias podría analizar los datos RUM segmentados por ubicación geográfica para optimizar la entrega de contenido para lectores en diferentes regiones, asegurando tiempos de carga más rápidos para eventos de noticias de última hora.

6. Usar paneles e informes

Cree paneles e informes para visualizar sus datos RUM y compartir ideas con su equipo. Los paneles deben proporcionar una descripción general de alto nivel del rendimiento del sitio web, mientras que los informes deben proporcionar información más detallada sobre problemas de rendimiento específicos. Los informes regulares, compartidos con las partes interesadas, ayudan a mantener el enfoque en la mejora del rendimiento. Estos informes deben ser fácilmente comprensibles tanto para los miembros técnicos como para los no técnicos del equipo, permitiendo una toma de decisiones informada.

Mejores prácticas para la implementación de RUM

Aquí hay algunas mejores prácticas para implementar RUM de manera efectiva:

• Comience con un objetivo claro: Defina lo que quiere lograr con RUM. ¿Qué métricas de rendimiento son más importantes para su negocio? ¿Qué problemas está tratando de resolver? Para un sitio de comercio electrónico, un objetivo claro podría ser reducir las tasas de abandono del carrito mejorando los tiempos de carga de la página de pago.
• Elija la herramienta RUM adecuada: Seleccione una herramienta RUM que satisfaga sus necesidades y presupuesto específicos. Considere factores como características, precio, facilidad de uso, integración, escalabilidad y privacidad de los datos.
• Implemente RUM temprano: Implemente RUM tan pronto como sea posible en el proceso de desarrollo. Esto le permitirá identificar problemas de rendimiento desde el principio y evitar que se conviertan en problemas mayores.
• Monitoree el rendimiento continuamente: Monitoree el rendimiento del sitio web continuamente para identificar y abordar los problemas de rendimiento con prontitud. Configure alertas para notificarle de cualquier degradación significativa del rendimiento. Un enfoque de monitorización continua ayuda a garantizar que los problemas de rendimiento se aborden antes de que afecten significativamente a los usuarios.
• Optimice para móviles: Optimice su sitio web para dispositivos móviles, ya que los usuarios móviles a menudo tienen conexiones de red más lentas y dispositivos menos potentes.
• Use una Red de Entrega de Contenidos (CDN): Use una CDN para distribuir el contenido de su sitio web a servidores de todo el mundo. Esto reducirá la latencia y mejorará los tiempos de carga de la página para los usuarios en diferentes ubicaciones geográficas.
• Optimice las imágenes: Optimice las imágenes comprimiéndolas, redimensionándolas a las dimensiones apropiadas y usando formatos de imagen modernos como WebP.
• Minifique JavaScript y CSS: Minifique los archivos JavaScript y CSS para reducir su tamaño y mejorar los tiempos de carga de la página.
• Aproveche el almacenamiento en caché del navegador: Aproveche el almacenamiento en caché del navegador para almacenar recursos estáticos en el navegador del usuario. Esto reducirá el número de solicitudes al servidor y mejorará los tiempos de carga de la página para los usuarios recurrentes.
• Use la carga asíncrona: Use la carga asíncrona para scripts y otros recursos que no son críticos para el renderizado inicial de la página. Esto evitará que estos recursos bloqueen el renderizado de la página.
• Priorice el contenido "above-the-fold" (visible sin desplazar): Priorice la carga del contenido que es visible en la parte superior de la página. Esto mejorará el rendimiento percibido de la página.
• Revise y refine regularmente: Regularmente revise sus datos RUM y refine sus estrategias de optimización en función de los conocimientos que obtenga. El rendimiento del sitio web es un proceso continuo, por lo que es importante monitorear y optimizar continuamente su sitio web.

RUM y las Web Vitals

Las Web Vitals de Google son un conjunto de métricas que miden la experiencia del usuario de una página web. Estas métricas están diseñadas para reflejar cómo los usuarios perciben el rendimiento de un sitio web. Las Core Web Vitals son:

• Largest Contentful Paint (LCP): Mide el rendimiento de carga del elemento de contenido más grande en una página.
• First Input Delay (FID): Mide la capacidad de respuesta de una página a las interacciones del usuario.
• Cumulative Layout Shift (CLS): Mide la estabilidad visual de una página.

El RUM es esencial para medir y monitorear las Web Vitals. Al rastrear estas métricas en condiciones del mundo real, puede identificar áreas donde su sitio web está fallando en cumplir con las expectativas del usuario y priorizar los esfuerzos de optimización en consecuencia. La mayoría de las herramientas RUM ofrecen soporte integrado para medir las Web Vitals, lo que facilita el seguimiento de su progreso a lo largo del tiempo. Optimizar para las Web Vitals puede mejorar el ranking de su sitio web en los motores de búsqueda y la experiencia del usuario.

Errores comunes a evitar

• Recopilar demasiados datos: Aunque el RUM se trata de recopilar datos, demasiados datos pueden impactar el rendimiento del sitio que está tratando de monitorear. Considere cuidadosamente qué datos son esenciales y evite recopilar información redundante o innecesaria.
• Ignorar la privacidad de los datos: Sea consciente de la privacidad del usuario. Anonimice los datos donde sea posible y asegúrese de cumplir con las regulaciones de privacidad como GDPR y CCPA. Obtenga el consentimiento del usuario donde sea requerido.
• No segmentar los datos: La falta de segmentación de datos puede ocultar información crucial. Por ejemplo, el rendimiento general podría verse bien, pero el rendimiento podría ser deficiente para los usuarios móviles en una región geográfica específica.
• Centrarse solo en las métricas: Aunque las métricas son importantes, no pierda de vista la experiencia real del usuario. Combine los datos RUM con los comentarios de los usuarios y los datos cualitativos para obtener una imagen completa.
• Ignorar los scripts de terceros: Los scripts de terceros (por ejemplo, anuncios, análisis, widgets de redes sociales) pueden impactar significativamente el rendimiento del sitio web. Monitoree el rendimiento de estos scripts y trabaje con los proveedores de terceros para optimizarlos.
• No establecer presupuestos de rendimiento: Establezca presupuestos de rendimiento para fijar objetivos de rendimiento claros y seguir el progreso a lo largo del tiempo. Los presupuestos de rendimiento le ayudan a mantenerse enfocado en la mejora continua.

Conclusión

La Medición de Usuarios Reales (RUM) es una herramienta esencial para comprender y optimizar el rendimiento de un sitio web. Al rastrear las experiencias reales de los usuarios, puede identificar cuellos de botella en el rendimiento, priorizar los esfuerzos de optimización y asegurarse de que su sitio web ofrezca una experiencia rápida y fiable para todos los usuarios, independientemente de su ubicación, dispositivo o conexión de red. La implementación de RUM requiere una planificación cuidadosa, las herramientas adecuadas y un compromiso con la monitorización y optimización continuas. Siguiendo las mejores prácticas descritas en esta guía, puede aprovechar el RUM para mejorar la satisfacción del usuario, aumentar el compromiso e impulsar los resultados del negocio a escala global.